<template>
  <div>
    <router-tip></router-tip>
    <div class="orderTest-container">
      <div class="content">
        <div
          class="blog-item"
          v-for="(blog, index) in blogsList"
          :key="index"
          @click="toDetail(blog)"
        >
          <div class="img">
            <img :src="blog.top_img" alt="" />
          </div>
          <div class="item">
            <div class="tip ">
              <div class="author">Mr.Lih</div>
              <div class="time line">{{ blog.create_time | formatData }}</div>
            </div>
            <div class="title">
              {{ blog.title }}
            </div>
            <div class="info" ref="info" v-html="blog.content">
              <!-- {{ blog.content | cutString }} -->
            </div>
            <div class="more">更多...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getBlogs } from "@/api/getBlogs";
  export default {
    name: "Blog",
    components: {},
    data() {
      return {
        blogsList: [],
      };
    },
    filters: {
      // 截取字符
      cutString: (str) => {
        return str.substring(0, 120) + "...";
      },
      // 格式化时间
      formatData: (val) => {
        if (val) {
          return val.substring(0, 10);
        }
      },
    },
    created() {},
    mounted() {
      this.fetchData();
    },
    computed: {},
    watch: {},
    methods: {
      async fetchData() {
        getBlogs({
          pageSize: 10,
          pageNo: 1,
        }).then((res) => {
          console.log(res);
          this.blogsList = res.data.data;
          // 截取博客内容xx个字符
          this.$nextTick(() => {
            this.$refs.info.forEach((item) => {
              item.innerHTML = item.innerHTML.substring(0, 50) + "...";
            });
          });
        });
      },
      toDetail(item) {
        this.$router.push({
          name: "Detail",
          params: {
            id: item.id,
          },
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .content {
    @include flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: center;
    margin-top: 90px;
  }
  .blog-item {
    cursor: pointer;
    background-color: #12152f;
    box-sizing: border-box;
    width: 80%;
    border-radius: 10px;
    transition: 0.3s;
    margin-bottom: 50px;
  }
  .item {
    padding: 30px;
  }
  .blog-item:hover {
    transform: translateY(-30px);
    .title {
      color: $hoverColor;
    }
  }
  .img {
    img {
      width: 100%;
      border-radius: 10px;
    }
  }
  .tip {
    @include flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px 20px;
    font-size: 16px;
  }
  .title {
    font-size: 24px;
    transition: 0.3s;
    text-align: center;
    margin: 15px 40px;
    line-height: 24px;
  }
  .info {
    margin: 15px 20px;
    text-align: center;
    color: #b0b0b2;
    font-size: 18px;
    line-height: 28px;
  }
  .more {
    color: $hoverColor;
    text-align: center;
    font-size: 16px;
    margin: 20px 0;
  }
  .line {
    padding-left: 53px;
    &::after {
      width: 45px !important;
    }
  }
  @media screen and (max-width: 1024px) {
    .blog-item {
      .item {
        padding: 5px;
      }
    }
  }
  @media screen and (max-width: 725px) {
    .blog-item {
      width: 100%;
      .item {
        padding: 5px;
        margin-top: 10px;
      }
    }
  }
</style>
